<!--数据字典管理-->
<template>
  <div style="min-width: 1100px; position: relative;">
    <a-col span="4" style="min-width: 236px; margin-right: 15px">
      <a-card style="height: 820px;">
                    <span slot="title">
                        组织机构
                    </span>
        <div style="height: 680px;overflow:auto; margin-left: -10px" class="resourceTree">
          <a-tree
              showIcon
              :autoExpandParent="autoExpandParent" @expand="onExpand"
              :expandedKeys="expandedKeys"
              :treeData='getOrgTree' @select="changeNode">
            <!--<em slot="folder" class="iconfont folderk"></em>-->
            <a-icon slot="folder" type="folder" />
            <a-icon slot="copy"  type="file" style="color: #dde6f8; font-size: 18px; margin-right: 8px"/>
            <!--<em slot="copy" class="iconfont file" style="color: #dde6f8; font-size: 18px; margin-right: 8px"></em>-->
            <template slot="custom" slot-scope="{ expanded }">
              <a-icon :type="expanded ? 'folder' : 'file'"
                      style="color: rgba(0, 0, 0, 0.65);font-size: 18px; margin-right: 8px"></a-icon>
            </template>
          </a-tree>
        </div>
      </a-card>
    </a-col>
    <a-col span="18">
        <div style="height: 10px"></div>
        <div class="commonStyle nyContent">
            <div class="table-operator">
                <a-button type="primary" @click="addOrg" v-if="hasPermission('sysorg:addSysOrg')">新增</a-button>
            </div>
            <a-table :columns="columns" :dataSource="getSysOrgDTOs" :rowKey="record => record.id"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                     :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ (page.currentPage - 1) * page.pageSize + index + 1 }}
                </span>
                <span slot="type" slot-scope="text, record, index">
                      {{ orgTypeList[record.type]?orgTypeList[record.type].label:'' }}
                  </span>
                <span slot="operation" slot-scope="text" class="table-operation">
                         <a @click="editSysOrg(text)" v-if="permission.updSysOrg"
                            :disabled="text.parentId === null || text.parentId === ''">
                            编辑</a>
                                <a @click="delSysOrg(text)" class="adel"
                                   v-if="permission.delSysOrgs"
                                   :disabled="text.parentId === null || text.parentId === ''">
                            删除</a>
                </span>
            </a-table>
            <Page :totalCount="pageVal.total" :currentPage="pageVal.currentPage" ref="page"
                  :pageSize="pageVal.pageSize" @changePage="changePage" @changePageSize="changePageSize" />
        </div>
        <add-edit ref="addEdit" :title="title" :orgTree="getOrgTree" :sysOrgDTO="sysOrgDTO" @init="init" />
    </a-col>
    </div>
</template>

<script>
    import addEdit from './addEdit.vue'
    import util from '@/libs/util.js'
    import { mapState } from 'vuex'
    import Page from 'module/pagination'

    export default {
        name: 'sys_org',
        components: {
            addEdit,
            Page
        },
        data () {
            return {
                title: true,
                showAddTable: false,
                showDelTable: false,
              autoExpandParent: true,
              expandedKeys: [],
              orgTypeList: [],
                searchKey: '',
                id: undefined,
                permission: {
                    updSysOrg: false,
                    delSysOrgs: false
                },
                array: [ 10, 20, 30, 40 ],
                /*选中的记录*/
                selectedRowKeys: [],
                sysOrgDTO: {
                    id: '',
                    name: '',
                    parentId: '',
                    parentName: '',
                    orderNum: '',
                    description: '',
                    createTime: ''
                },
                page: {
                    currentPage: 1,
                    pageSize: 10
                },
                columns: [
                    {title: '序号', key: 'index', width: '7%', align: 'center', scopedSlots: {customRender: 'index'}},
                    {title: '机构名称', dataIndex: 'name', key: 'name'},
                  {title: '类型', key: 'type', width: '7%', align: 'center', scopedSlots: {customRender: 'type'}},
                    {title: '上级机构', dataIndex: 'parentName', key: 'parentName'},
                    {title: '创建时间', dataIndex: 'createTime', key: 'orgName'},
                    {title: '操作', key: 'operation', width: '13%', scopedSlots: {customRender: 'operation'}}
                ]
            }
        },
        computed: {
            getSysOrgDTOs () {
                return this.$store.state.sysOrg.sysOrgDTOs
            },
            ...mapState ({
                pageVal: state => state.sysOrg.page
            }),
            getOrgTree () {
                return this.$store.state.sysOrg.sysOrgTree
            }
        },
        methods: {
          /**
           * Function    : loadPageDictDatas
           * Description : 加载数据字典
           * Input       : val
           * Return      : none
           */
          loadPageDictDatas () {
            // 操作类型
            this.$loadSysDicts (this.$dicts.sortCode.ORG_TYPE, this.orgTypeList)
          },

          onExpand ( expandedKeys ) {
            this.expandedKeys = expandedKeys
            this.autoExpandParent = false
          },
          /**
           * Function    : disableResource
           * Description : 切换资源节点
           * Input       : data
           * Return      : none
           */
          changeNode ( data, node, selectedNodes ) {
            if(data.length >0){
              this.currentSelectedNodeId = data[ 0 ]
              this.id = this.currentSelectedNodeId;
              this.handleSubmit()
            }
          },
            emitEmpty () {
                this.searchKey = ''
                this.page.currentPage = 1
                this.init();
            },
            reStore(){
                this.searchKey = ''
                this.id = undefined
                this.page.currentPage = 1
                this.init();
            },
            /**
             * Function    : onSelectChange
             * Description : 选择当前行id
             * Input       : none
             * Return      : none
             */
            onSelectChange ( selectedRowKeys ) {
                this.selectedRowKeys = selectedRowKeys
            },
            /*
             * 过滤输入框输入的特殊字符
             * */
            formatEnterContent ( value ) {
                let b = value
                b = b.replace (/[^/\u4e00-\u9fa5a-zA-Z0-9]/ig, '')
                if (b.length > 30) {
                    b = b.substring (0, 30)
                }
                this.searchKey = b
            },

            /**
             * Function    : init
             * Description : 页面初始化
             * Input       : none
             * Return      : none
             */
            init () {
                let para = Object.assign ({},
                  {searchKey: this.searchKey.trim ()},
                  {id: this.id}, this.page)
                this.selectedRowKeys = []
                this.$store.dispatch ('findSysOrgsAct', para)
                this.$store.dispatch ('loadSysOrgTreeAct')
            },
            /**
             * Function    : editSysOrg
             * Description : 修改信息
             * Input       : userName 用户名
             * Return      : none
             */
            editSysOrg ( rowData ) {
                let newParams = Object.assign ({}, rowData)
                this.sysOrgDTO = newParams
                this.showAddTable = true
                this.title = false
                this.$refs.addEdit.showEdit (rowData)
            }, /**
             * Function    : delSysOrg
             * Description : 删除
             * Input       : userName 用户名
             * Return      : none
             */
            delSysOrg ( rowData ) {
                this.$confirm ({
                    title: `删除后该下属部门将全部被删除，确认删除该组织机构？`,
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        this.$store.dispatch ('batchDelSysOrgAct', {id: rowData.id}).then (response => {
                            if (response.code === 0) {
                                this.$message.success (response.message)
                                this.init ()
                            } else {
                                this.$message.error (response.message)
                            }
                        })
                    }
                })
            },

            /**
             * Function    : addOrg
             * Description : 新增数据字典
             * Input       : none
             * Return      : none
             */
            addOrg () {
                this.clearSysOrgDTO ()
                this.title = true
                this.$refs.addEdit.showModal ()
            },

            /**
             * Function    : checkCol
             * Description : 选择框事件
             * Input       : sel
             * Return      : none
             */
            checkCol ( sel ) {
                let check = []
                sel.forEach (( item, index ) => {
                    check.push (item)
                })
                this.checkData = check
            },

            /**
             * Function    : changePage
             * Description : 切换页码
             * Input       : val 页数
             * Return      : none
             */
            changePage ( val ) {
                this.page.currentPage = val
                this.init ()
            },

            /**
             * Function    : changePageSize
             * Description : 切换每页条数
             * Input       : vm 页数
             * Return      : none
             */
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.currentPage = 1
                this.init ()
            },

            /**
             * Function    : handleSubmit
             * Description : 查询按钮
             * Input       : none
             * Return      : none
             */
            handleSubmit () {
                this.page.currentPage = 1
                this.init ()
            },

            /**
             * Function    : clearSysOrgDTO
             * Description : 初始化sysOrgDTO对象
             * Input       : none
             * Return      : none
             */
            clearSysOrgDTO () {
                this.sysOrgDTO = {
                    id: '',
                    name: '',
                    parentId: null,
                    parentName: '',
                    description: '',
                    createTime: ''
                }
            },

            /**
             * Function    : selectNodeId
             * Description : 初始化权限码
             * Input       : none
             * Return      : none
             */
            selectNodeId ( val ) {
                this.id = val.id
            },

            /**
             * Function    : initPermission
             * Description : 初始化权限码
             * Input       : none
             * Return      : none
             */
            initPermission () {
                this.permission = {
                    updSysOrg: this.hasPermission ('sysorg:updSysOrg'),
                    delSysOrgs: this.hasPermission ('sysorg:delSysOrgs')
                }
            }
        },

        /**
         * Function    : created
         * Description : 钩子函数
         * Input       : none
         * Return      : none
         */
        created () {
            this.initPermission ()
            this.init ()
          this.loadPageDictDatas()
            /*if (!this.permission.updSysOrg) {
                this.columns1 = this.columns1.splice (0, 4)
                this.columns1.shift ()
            }*/
        }
    }
</script>
